<template>
	<view class="">
		<shopro-login-modal></shopro-login-modal>
		<view class="page">
				<view class="top">
					<view class="title">
						<view class="icon">
							<u-icon name="arrow-left" @click="goBack()" size="40"></u-icon>
						</view>
						<text>每日签到</text>
					</view>
					<view class="signLnBtn" @click="signLn">
						{{ pageObj.sign_status ? '已签到' : '签到' }}
					</view>
					<view class="info">
						<view class="infoItem" v-for="(item,index) in infoArr" :key="index">
							<view class="val">
								{{item.val}}
							</view>
							<text>{{item.desc}}</text>
						</view>
					</view>
					
				</view>
				
				<view class="dateBox">
					<diyCalendar ref="diyCalendar"></diyCalendar>
				</view>
				<view class="descTitle">签到说明</view>
				<view class="desc">
					{{descObj}}
				</view>
					
		</view>
		<u-mask :show="signInShow" @click="signInShow = false">
			<view class="warp">
				<image src="http://shiliu.gdxuanbao.com/image/siginSuc.png"  style="width: 546upx; height: 689upx;"></image>
				<text>今日签到奖励</text>
				<view class="reward">
					{{reward}}
				</view>
				<view class="btn"  @click="signInShow = false">
					好的
				</view>
			</view>
		</u-mask>
	</view>
	
</template>

<script>
	import diyCalendar from '@/components/diyCalendar/diyCalendar.vue'
	export default {
		data() {
			return {
				activeTypeId: '0',
				params:{
					keyword:'',
					page: 1,
				},
				typeArr:[
					{name:'全部',id:'0',}
				],
				goodsList:[],
				infoArr:[
					{
						val: '1天',
						desc : '已连续签到',
					},
					{
						val: '1天',
						desc : '累计签到',
					},
					{
						val: '0',
						desc : '累计石榴籽奖励',
					},
					
				],
				signLnBtnType : 1 ,//1签到 2已签到
				pageObj :{},
				descObj:'',
				shareInfo:{},
				signInShow : false,
				reward: '',
				// historyArr:[],//签到历史
			};
		},
		methods:{
			dateChange(){
				
			},
			signLn(){
				// if(this.pageObj.cumulative){
				// 	return
				// }
				this.myHttp({
					data:{
						route : 'plugin.sign.Frontend.Modules.Sign.Controllers.sign.sign',
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.getHistoryDay()
						this.getPageInfo()
						let date = new Date();
						let year = date.getFullYear();//
						let month = date.getMonth() + 1;
						let day = date.getDate();
						let nowDay = `${year}-${month}-${day}`
						let signlnObj = {}
						signlnObj.nowDay = nowDay
						uni.setStorageSync('signlnObj',signlnObj)
						this.reward  = res.msg
						this.signInShow = true
						// uni.showToast({
						// 	title: '签到成功',
						// 	// icon: 'none'
						// })
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			
			},
			getPageInfo(){
				this.myHttp({
					data:{
						route : 'plugin.sign.Frontend.Modules.Sign.Controllers.sign-log.index',
						uid: uni.getStorageSync('userInfo').uid
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.pageObj = res.data
						this.infoArr[0].val = this.pageObj.continue_days 
						this.infoArr[1].val = this.pageObj.sign_total
						this.infoArr[2].val = this.pageObj.love
						if(res.data.sign_log.length){
							let historyArr = res.data.sign_log
							this.$refs.diyCalendar.historyDays = []
							
							this.$refs.diyCalendar.historyDays = historyArr
							this.$refs.diyCalendar.setHistoryDays()
						}
					}
				})
			},
			getSinglnDesc(){
				this.myHttp({
					data:{
						route : 'plugin.sign.Frontend.Controllers.explain.index',
						uid: uni.getStorageSync('userInfo').uid
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.descObj = res.data.explain_content
					}
				})
			},
			getShareInfo(){
				this.myHttp({
					data:{
						route : 'plugin.sign.Frontend.Controllers.share.index',
						uid: uni.getStorageSync('userInfo').uid
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.shareInfo = res.data.share
					}
				})
			},
			getHistoryDay(){
				this.myHttp({
					data:{
						route : 'plugin.sign.Frontend.Modules.Sign.Controllers.sign-log.log',
						uid: uni.getStorageSync('userInfo').uid
					}
				}).then((res)=>{
					if(res.result== '1'){
						// this.historyArr = res.data.sign_log
						// console.log(historyArr);
					}
				})
			},
			init(){
				this.getPageInfo()
				this.getSinglnDesc()
				// this.getShareInfo()
				this.getHistoryDay()
			}
		},
		components:{
			diyCalendar
		},
		filters:{
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		text{
			font-weight: 600;
			font-size: 45rpx;
			margin-top: -320rpx;
		}
		.reward{
			font-size: 42rpx;
			color: #FF534E;
			margin: 50rpx 0;
		}
		.btn{
			width: 343rpx;
			height: 71rpx;
			background: #FF534E;
			border-radius: 36px;
			display: grid;
			place-items: center;
			color: #fff;
			font-size: 33rpx;
		}
	}
	
	
	
	.page{
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;
		// position: relative;
		.top{
			width: 100%;
			height: 625rpx;
			background: linear-gradient(246deg, #FE4A4B, #FF787A);
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				margin-top: 12%;
				display: flex;
				justify-content: center;
				color: #fff;
				font-weight: bold;
				font-size: 31rpx;
				width: 100%;
				.icon{
					position: absolute;
					left: 5%;
				}
			}
			.signLnBtn{
				margin-top: 59rpx;
				width: 188rpx;
				height: 188rpx;
				background: #FFFFFF;
				border: 10rpx solid #FF9090;
				border-radius: 50%;
				display: grid;
				place-items: center;
				font-size: 41rpx;
				font-weight: bold;
				color: #FF5550;
			}
			.info{
				display: flex;
				width: 100%;
				justify-content: space-between;
				padding: 35rpx;
				color: #fff;
				.infoItem{
					display: flex;
					flex-direction: column;
					align-items: center;
					.val{
						font-size: 41rpx;
						margin-bottom: 32rpx;
					}
					text{
						font-size: 26rpx;
					}
				}
			}
		}
		
	
		.dateBox{
			width: 690rpx;
			height: 708rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 43rpx 0px rgba(255, 111, 107, 0.33);
			border-radius: 20rpx;
			margin-top: -60rpx;
		}
		.descTitle{
			font-size: 34rpx;
			font-weight: bold;
			color: #111111;
			width: 690rpx;
			height: 80rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			margin-top: -40rpx;
		}
		
		.desc{
			width: 690rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100vw;
			background-color: #fff;
			height: 500rpx;
			box-shadow: 20rpx 20rpx 43rpx 20rpx #FFFFFF;
			font-size: 28rpx;
			color: #868686;
		}
	
	
	}

</style>
